<template>
    <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="450px">
        <a-spin :spinning="loading">
            <a-form :form="form">
                <a-row :gutter="[24, 0]">
                    <a-col :span="20">
                        <a-form-item class="mb-15" label="父级名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                           
                             <a-select disabled class="flex-1" v-model="parentId" placeholder="请选择父级"
                             >
                                <a-select-option v-for="item in parentList" :key="item.value"
								:value="item.value">{{ item.name }}
							</a-select-option>
                
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="[24, 0]">
                    <a-col :span="20">
                        <a-form-item class="mb-15" label="类目名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input placeholder="请输入类目名称" v-decorator="['name',
                                {
                                    rules: [{ required: true, message: '请输入类目名称', whitespace: true }],
                                },
                            ]" maxLength="30"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="[24, 0]">
                    <a-col :span="20">
                        <a-form-item class="mb-15" label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <div class="flex items-center">
                                <a-switch :disabled="prohibit" @change="checkedChange" checked-children="开" un-checked-children="关"
                                    v-decorator="['status', { valuePropName: 'checked' }]" />
                                <div class="ml-20">{{ isStatus }}</div>
                            </div>
                        </a-form-item>
                    </a-col>

                </a-row>

            </a-form>
        </a-spin>
    </a-modal>
</template>
<script>
import {
    get
} from 'lodash'
import {
    deductionDetail, categoryCreate,categoryUpdate,categoryCreateChild
} from '@/api/newPet'
export default {
    data() {
        return {
            loading: false,
            isShow: true,
            isStatus: '上架',
            parentList:[
              {
                name:'顶级',
                value:'0'
              }
            ],
            parentId:'0',
            prohibit:false,
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            },
            details: {},
            showModal: false,
            titles: '新增',
            info: {},
            form: this.$form.createForm(this),
            parentName:''
        }
    },
    computed: {

    },
    watch: {

    },
    async created() {

    },
    methods: {
        checkedChange(e) {

            this.isStatus = e ? '上架' : '下架'
        },
        formgetFileLength(type) {//获取图片
            return get(this.form.getFieldValue(type), 'length') || 0
        },
        formuploadSuccess(data, type) {
            this.form.setFieldsValue({
                images: [...this.form.getFieldValue(type), data.path],
            })
        },
        changeSelect(e) {
            console.log(e)
        },
        onChange(e) {
            console.log(e.target.value)
        },
        cancel() {

            this.form.resetFields()
            this.showModal = false

        },
        confirmOk() {
            this.form.validateFields((err, values) => {

                if (!err) {
                    // this.loading = true
                    const {
                        info

                    } = this
                    let data = {
                        id: info.id ?this.info.isPerson=='子'?undefined:info.id : undefined,
                        ...this.$utils.trimValue(values),
                        status: typeof values.status === 'undefined' ? 0 : values.status?0:1,
                        parentId:this.info.id?this.parentId:0,
                        parentName:this.parentName?this.parentName:undefined
                    }
                   
                    const fun =info.id ? this.info.isPerson=='子'?categoryCreateChild:categoryUpdate : categoryCreate
                    fun(data)
                        .then(() => {
                            this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
                            this.$emit('upload')
                            this.cancel()
                        })
                        .finally(() => {
                            this.loading = false
                        })
                }
            })
        },
        getData() {
            this.loading = true
            deductionDetail({ id: 1 }).then(data => {
                this.details = data
            }).finally(() => this.loading = false)
        },
        open(data) {
            this.prohibit=false
            this.isStatus='上架'
            this.showModal = true
            this.info = data
            if (data.id) {
                
                this.parentList=[
                    {
                        value:data.id,
                        name:data.name
                    }
                ]
                this.isStatus = data.status == 0 ? '上架' : '下架'
                
                this.titles = '修改'
                
                if(data.isPerson=='子'){
                  this.parentId=data.id
                     this.prohibit=true
                    this.parentName = data.name
                     this.$nextTick(() => {
                         this.form.setFieldsValue({
                            parentName:data.name,
                             status: true,
                     
                         })
                     })
                }else if(data.isPerson=='编辑子'){
                    
                    this.prohibit=true
                    this.parentName = data.parentName
                     this.$nextTick(() => {
                         this.form.setFieldsValue({
                             ...data,
                             status: true,
                     
                         })
                     })
                }else{
                   this.parentName = ''
                  
                  this.$nextTick(() => {
                      this.form.setFieldsValue({
                          ...data,
                          status: data.status == 0 ? true : false,
                      })
                  })
                }
            } else {
                console.log(data, '新增')
                this.titles = '新增'
                this.parentName = ''
                this.$nextTick(() => {
                    this.form.setFieldsValue({
                        status: true

                    })
                })
            }

            // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']

            // this.$emit('upload')
            // this.$nextTick(() => {
            //     this.form.setFieldsValue({
            // 					...res
            // 				})

            // 			})
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
    // width: 100px;


}
</style>
    